Angular Material এর Autocomplete কম্পোনেন্টটি একটি অত্যন্ত শক্তিশালী এবং প্রয়োজনীয় UI উপাদান, যা ব্যবহারকারীদের টাইপ করার সময় তাদের জন্য প্রাসঙ্গিক সুপারিশ (suggestions) প্রদর্শন করে। এটি Reactive Forms এর সাথে একসাথে ব্যবহার করতে অত্যন্ত সুবিধাজনক, যেখানে আপনি সহজেই ইউজারের ইনপুট ভ্যালু চেক করতে এবং সুপারিশ সিস্টেম তৈরি করতে পারেন।

এখানে আমরা Angular Material Autocomplete কম্পোনেন্টটি কিভাবে Reactive Forms এর সাথে ব্যবহার করা যায় তা দেখব।

১. প্রাথমিক প্রস্তুতি

প্রথমে, আপনাকে MatAutocompleteModule এবং ReactiveFormsModule ইমপোর্ট করতে হবে।

Step 1: প্রয়োজনীয় মডিউলগুলি ইমপোর্ট করা

app.module.ts ফাইলে MatAutocompleteModule এবং ReactiveFormsModule ইমপোর্ট করুন:

import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    MatAutocompleteModule,
    ReactiveFormsModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

২. Reactive Form সেটআপ করা

React Forms ব্যবহার করতে, আপনাকে প্রথমে FormGroup এবং FormControl ব্যবহার করে একটি রিঅ্যাকটিভ ফর্ম তৈরি করতে হবে। নিচে একটি উদাহরণ দেওয়া হল, যেখানে Autocomplete এর জন্য একটি ফর্ম কন্ট্রোল তৈরি করা হয়েছে।

Step 2: ফর্ম তৈরি করা

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  searchForm: FormGroup;
  options: string[] = ['Apple', 'Banana', 'Orange', 'Mango', 'Pineapple', 'Peach'];

  constructor() {
    this.searchForm = new FormGroup({
      search: new FormControl('')
    });
  }
}

এখানে options অ্যারে একটি সাধারণ ফলের তালিকা, যা Autocomplete কম্পোনেন্টে প্রস্তাব হিসেবে ব্যবহার হবে।

৩. HTML ফাইলে Autocomplete ব্যবহার করা

Angular Material এর mat-autocomplete কম্পোনেন্টটি ব্যবহার করতে, HTML ফাইলে এটি কনফিগার করতে হবে।

Step 3: Autocomplete HTML ফাইল

<form [formGroup]="searchForm">
  <mat-form-field appearance="fill">
    <mat-label>Search for fruits</mat-label>
    <input matInput [matAutocomplete]="auto" formControlName="search">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of options | filter:searchForm.value.search" [value]="option">
        {{ option }}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

এখানে:

• mat-form-field: Angular Material এর ফর্ম ফিল্ড কম্পোনেন্ট, যেটি ইনপুট এবং অন্যান্য ফর্ম উপাদানগুলি সুন্দরভাবে প্রদর্শন করতে সহায়ক।
• mat-autocomplete: এটি ব্যবহারকারীর টাইপ করার সময় প্রাসঙ্গিক সুপারিশ প্রদর্শন করে।
• *ngFor: এই ডিরেকটিভের মাধ্যমে options অ্যারে থেকে প্রতিটি অপশন দেখানো হচ্ছে।
• filter: এখানে আমরা filter পাইপ ব্যবহার করেছি যা ডাটা ফিল্টার করার জন্য, তবে এটি আলাদা পাইপ তৈরি করতে হতে পারে (যেমন, search ফিল্টার করতে)।

৪. ফিল্টারিং ও অটোকমপ্লিট

আমরা Autocomplete কম্পোনেন্টের মধ্যে একটি filter পাইপ ব্যবহার করেছি যাতে ইউজারের ইনপুট অনুযায়ী অটোকমপ্লিটের রেজাল্টস ফিল্টার করা যায়। তবে Angular এর নিজস্ব filter pipe নেই, তাই আপনাকে নিজেই একটি filter পাইপ তৈরি করতে হবে।

Step 4: ফিল্টার পাইপ তৈরি করা

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {
  transform(items: any[], searchText: string): any[] {
    if (!items) return [];
    if (!searchText) return items;
    searchText = searchText.toLowerCase();
    return items.filter(item => item.toLowerCase().includes(searchText));
  }
}

এটি একটি কাস্টম পাইপ যা ব্যবহারকারীর ইনপুটের সাথে তালিকা ফিল্টার করবে।

৫. অ্যাপ্লিকেশন চলানো

এখন আপনি যখন অ্যাপ্লিকেশন চালাবেন, তখন Reactive Form এর মাধ্যমে আপনি Autocomplete কম্পোনেন্ট ব্যবহার করতে পারবেন, এবং ব্যবহারকারীর ইনপুট অনুযায়ী প্রাসঙ্গিক ফলের নাম দেখাবে।

Angular Material Autocomplete কম্পোনেন্টটি Reactive Forms এর সাথে একত্রে ব্যবহার করে একটি অত্যন্ত শক্তিশালী এবং ইন্টারেক্টিভ ইউজার ইন্টারফেস তৈরি করা সম্ভব। এটি search, filtering, এবং suggestions ফিচারগুলিকে সহজভাবে ইমপ্লিমেন্ট করতে সহায়তা করে। FormControl এবং FormGroup ব্যবহার করে ইনপুট ভ্যালু ট্র্যাক করা যায় এবং ডেটা বাইন্ডিংয়ের মাধ্যমে ব্যবহারকারীর সঠিক অভিজ্ঞতা প্রদান করা হয়।